<template>
  <div class="cell-attr">
    <el-tabs>
      <el-tab-pane label="属性">
        <div class="row" v-for="(comattr, index) in comf.comattrs">
          <div class="row-name">{{ comattr.lable }}:</div>
          <el-input v-if="comattr.rendtype == 'input'" v-model="comattr.comtext"></el-input>
          <el-select v-if="comattr.rendtype == 'select'" v-model="comattr.comtext" :multiple="comattr.multiple"
            collapse-tags>
            <el-option v-for="item in comattr.optionitem" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-switch v-if="comattr.rendtype == 'switch'" v-model="comattr.comtext"></el-switch>
        </div>
      </el-tab-pane>
      <el-tab-pane label="事件">
        <div class="row" v-for="(comevent, index) in comf.comevents">
          <div class="row-name">{{ comevent.lable }}:</div>
          <el-input v-if="comevent.rendtype == 'input'" v-model="comevent.comtext"></el-input>
          <el-select v-if="comevent.rendtype == 'select'" v-model="comevent.comtext" :multiple="comevent.multiple"
            collapse-tags>
            <el-option v-for="item in comevent.optionitem" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-switch v-if="comevent.rendtype == 'switch'" v-model="comevent.comtext"></el-switch>
        </div>
      </el-tab-pane>
      <el-tab-pane label="其它">
        <div class="row" v-for="(comstyle, index) in comf.comstyles">
          <div class="row-name">{{ comstyle.lable }}:</div>
          <el-input v-if="comstyle.rendtype == 'input'" v-model="comstyle.comtext"></el-input>
          <el-select v-if="comstyle.rendtype == 'select'" v-model="comstyle.comtext" :multiple="comstyle.multiple"
            collapse-tags>
            <el-option v-for="item in comstyle.optionitem" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-switch v-if="comstyle.rendtype == 'switch'" v-model="comstyle.comtext"></el-switch>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { comconfig } from "../config/cellConfigs";
import { deepCopy } from "@/utils/public";
import winCellVar from "@/system/components/winCellVar.vue";

export default {
  name: "sysCellAttr",
  props: {
    com: { default: null },
  },
  components: {
    winCellVar,
  },
  data() {
    return {
      comf: null,
    };
  },
  computed: {},
  methods: {},
  created: function () {
    this.comf = deepCopy(comconfig);
    console.log(this.comf);
  },
  mounted() { },
};
</script>

<style scoped>
.cell-attr {
  width: 100%;
  height: 100%;
}

.cell-attr .el-tabs {
  height: 100%;
}

.cell-attr .el-tabs--border-card {
  border: none;
}

>>>.el-tabs__active-bar {
  width: 60px !important;
  left: -13px;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 13px;
}

>>>.el-tabs__item {
  padding: 0 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--disable-text-color);
}

/*活动颜色*/
>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
>>>.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tab-line-color);
}

.row {
  display: flex;
  line-height: 32px;
  margin-bottom: 10px;
}

.row-name {
  width: 65px;
  min-width: 65px;
  text-align: left;
}
</style>